<!--
 * @Description  : 文本插值
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:07:06
 * @LastEditors  : seraph
 * @LastEditTime : 2025-01-20 18:25:58
-->
<template>
  <h3>文本插值</h3>
  <p>最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：</p>
  <p>示例代码：</p>
  <pre><code class="html" v-html="highlighted1"></code></pre>
  <pre><code class="javascript" v-html="highlighted2"></code></pre>
  <hr />
  <h4>{{ msg }}</h4>
  <br />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import jacascript from 'highlight.js/lib/languages/javascript'
import html from 'highlight.js/lib/languages/xml'
import '@/assets/css/code.css'

hljs.registerLanguage('javascript', jacascript)
hljs.registerLanguage('html', html)

const rawHtml = ref('<h4>{{ msg }}</h4>')
const msg = ref('Hello Vue3!')

const rawCode1 = `{{ rawHtml }}`

const highlighted1 = ref(
  hljs
    .highlight(rawCode1, { language: 'html' })
    .value.replace(/&amp;lt;/g, '&lt;')
    .replace(/&amp;gt;/g, '&gt;'),
)

const rawCode2 = `const msg = ref('Hello Vue3!')`

const highlighted2 = ref(
  hljs
    .highlight(rawCode2, { language: 'javascript' })
    .value.replace(/&amp;lt;/g, '&lt;')
    .replace(/&amp;gt;/g, '&gt;'),
)
</script>

<style scoped>
h1,
h2,
h4,
h4,
h5,
h6 {
  padding: auto;
}
</style>
